<template>
  <div class="common_alert">
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div v-show="showValue" class="alert-mask" @touchmove.prevent.stop></div>
      <!-- <div v-if="show" class="alert-mask" @touchmove.prevent.stop @click="handleClose('mask')"></div> -->
    </transition>

    <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
      <div v-show="showValue" class="alert-content">
        <h2 class="title">
          <!-- <i class="icon" :class="content.type"></i> -->
          {{ content.title || '' }}
          <!-- <i class="btn-close" @click="handleClose('close')" v-if="showCancelIcon"></i> -->
        </h2>
        <p v-if="!custom" class="input-text" :class="{tip: content.type == 'tip'}">
          {{ content.text || '' }}
        </p>
        <slot v-if="custom" />

        <button :data-clipboard-text="content.copyText" class="copy_btn btn-confirm" v-if="!hasCancel" @click="handleClose('confirm',$event)">
          {{ content.confirmText || customConfirmText }}
        </button>

        <div class="btns" v-if="hasCancel">
          <button class="btn cancel" @click="handleClose('cancel')">
            {{ cancelText }}
          </button>
          <button class="btn confirm" @click="handleClose('confirm')">
            {{ customConfirmText }}
          </button>
        </div>

      </div>
    </transition>
  </div>
</template>
<script>
import { isEmpty } from '@/utils'

export default {
  name: 'CommonAlert',
  props: {
    show: {
      // 是否显示弹窗
      type: Boolean,
      default: false
    },
    type: {
      // 标题图标类型
      type: String,
      default: 'warn' // 默认提示图标
      // default: 'exit', // 默认提示图标
      // default: 'success', // 默认提示图标
    },
    hasCancel: {
      // 取消按钮 默认不显示
      type: Boolean,
      default: false
    },
    content: {
      type: Object,
      default () {
        return {}
      }
    },
    custom: {
      // 是否自定义标签
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    customConfirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showCancelIcon: {
      type: Boolean,
      default: true
    }
  },

  data () {
    return {
      showValue: false,
      title: '',
      text: ''
    }
  },

  created () {
    if (typeof this.show !== undefined) {
      this.showValue = this.show
    }

    if (!isEmpty(this.content)) {
      this.title = this.content.title
      this.text = this.content.text
      // this.type = this.content.type;
    }
  },

  methods: {
    // 关闭弹窗
    // type: close, mask, confirm
    handleClose (type, $event) {
      // console.log('$event',$event)
      this.$emit('close', type, $event)
      this.$emit('input', false)
      this.showValue = false
      if (!this.content.onHide) return
      if (typeof (this.content.onHide) === 'function') {
        this.content.onHide()
      }
      // this.onHide()
    },

    onHide () {
      this.showValue = false
    }
  },

  watch: {
    show (val) {
      this.showValue = val
    },
    showValue (val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="less" scoped>
@theme-tip: #c2c2c2;
@border-color: #dfdfdf;
@themeBtn: #4884ff;
.alert-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1999;
}

.alert-content {
  position: fixed;
  left: 10%;
  // top: 35%;
  top: 50%;
  transform: translate(0, -50%);
  background-color: #fff;
  z-index: 2000;

  width: 80%;
  border-radius: 0.2rem;

  .title {
    position: relative;
    width: 100%;
    padding: 0.6rem 0 0.3rem 0;
    text-align: center;
    font-size: 0.34rem;
    font-weight: 700;
    color: #191919;
    .icon {
      content: "";
      position: absolute;
      top: 0;
      left: 0.1rem;
      width: 0.6rem;
      height: 100%;
      background: url("~@/assets/images/common/common_i_alert_warn.png") no-repeat center;
      background-size: 0.34rem;

      &.exit {
        background-image: url("~@/assets/images/common/common_i_alert_exit.png");
      }

      &.success {
        background-image: url("~@/assets/images/common/common_i_alert_success.png");
      }
    }

    .btn-close {
      position: absolute;
      right: 0.1rem;
      top: 0;
      width: 0.71rem;
      height: 100%;
      background: url("~@/assets/images/common/common_i_close.png") no-repeat center;
      background-size: 0.5rem;
    }
  }

  p {
    padding: 0 0.3rem 0.6rem 0.3rem;
    font-size: 0.24rem;
    line-height: 1.5;

    &.tip {
      max-height: 3rem;
      overflow: auto;
      text-align: center;
      font-size: 0.3rem;
      word-wrap: break-word;
    }
  }

  .btn-confirm {
    display: block;
    text-align: center;
    width: 100%;
    height: 1.1rem;
    line-height: 1.1rem;
    border-top: 0.01rem solid rgba(0,0,0,0.10);
    color: @themeBtn;
    font-size: 0.34rem;
    font-weight: 700;
  }
}

/* 底部按钮 */
.btns {
  display: flex;
  justify-content: center;
  // padding: 0.15rem 0 0.24rem;
  height: 1.1rem;
  border-top: 0.01rem solid rgba(0,0,0,0.10);
  align-items: center;
  .btn {
    width: 0;
    flex-grow: 1;
    font-size: 0.34rem;
    font-weight: 700;
    &.cancel {
      border-right: 0.01rem solid rgba(0,0,0,0.10);
      color: @theme-tip;
    }

    &.confirm {
      color: @themeBtn;
    }
  }
}
</style>
